<script>
// 顶部tab+页面切换
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQr'
})
</script>
<script setup>
import {
		ref
} from 'vue'
import {customerLossingStatus,customerGender} from '@/utils'
import {staffListData,qrListData} from '@/data'
import {postClientWay} from '@/api'
import { toRaw } from '@vue/reactivity';
import labels from '@/components/app/label.vue'
const addWaysList = ref([])
const getClientWay = async ()=>{
	const r = await postClientWay()
	if (r){
		addWaysList.value = r.data
	}
}
getClientWay()

const TestRef = ref(null)
const showLabels = ()=>{
	var data = {
    show:true,
    type:2,
	title:'批量打标签',
	tips:'将给满足条件的客户批量打标签，请选择标签',
	tipsshow:true,
  }
  TestRef.value.tableshow(data)
}

	const tagData = ref([])
	const labeldataapi=(val)=>{
		console.log(val,'hjkjk')
	var arr = []
	val.list.forEach(item=>{
		arr.push(toRaw(item))
	})
	tagData.value = arr
	}
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const dialogVisible1 = ref(false)
const staffData = ref([])
const chooseStaff = () => {
  dialogVisible1.value = true
  chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
  console.log(val, '数据回显')
  staffData.value = val
  handleRefresh()
}
const chooseDialogue = ref(null)
const staffList = ref([])
staffList.value = staffListData
	const qrList = ref([])
	qrList.value = qrListData
const queryform = ref({
	name:'',
	staffName:'',
	tag:'',
	times:'',
	 add_way:'',
	 gender:'',
	  status:''
})
const times = ref([])
const getData = ()=>{
	var obj = queryform.value
	obj.times = times.value || []
	obj.tags = []
	obj.staff_id = []
	tagData.value.forEach(item=>{
		obj.tags.push(item.tag_id)
	})
	staffData.value.forEach(item=>{
		obj.staff_id.push(item.id)
	})
	emits('getData',obj)
	console.log('搜索')
}
const clear = ()=>{
	queryform.value = {
		name:'',
		staff_id:[],
		tags:[],
		times:'',
		add_way:'',
		gender:'',
		status:''
	}
	tagData.value = []
	staffData.value = []
	times.value = []
}
const emits = defineEmits(['getData'])
</script>
<template>
	<div>
		<div v-if="!dialogVisible">
		<div class="app-select-box ">
			<el-form :inline="true" :form="queryform" label-width="70px">
				 <el-form-item label="搜索客户">
					<el-input class="app-select-input" v-model="queryform.name" />
				</el-form-item>
				 <el-form-item label="所属客服">
					<span v-if="isRefresh">
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-if="staffData.length>2">
    <span class="app-flex-left">
      <el-avatar v-if="staffData[0].avatar" class="cho-margin" shape="square" :size="30" :src="staffData[0].avatar" />
      <span>{{ staffData[0].name }}等{{staffData.length}}个账号</span>
    </span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
    <span class="app-flex-left" v-for="(item,index) in staffData" :key="index">
      <el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
      <span>{{ item.name }}</span>
    </span>
    <span v-if="staffData.length==0">请选择客服</span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
</span>



<ChooseDialogue :dialogVisible="dialogVisible1" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
				</el-form-item>
				<el-form-item in label="标签">
					<span v-if="isRefresh">
    <span @click="showLabels" class="app-flex-2 app-choose-staff" v-if="tagData.length>1">
      <span class="app-flex-left">
        
        <span>{{ tagData[0].tag_name }}等{{tagData.length}}个标签</span>
      </span>
      <el-icon>
        <ArrowDown />
      </el-icon>
    </span>
    <span @click="showLabels" class="app-flex-2 app-choose-staff" v-else>
      <span class="app-flex-left" v-for="(item,index) in tagData" :key="index">
        <span>{{ item.tag_name }}</span>
      </span>
      <span v-if="tagData.length==0">请选择标签</span>
      <el-icon>
        <ArrowDown />
      </el-icon>
    </span>
  </span>
	<labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
				</el-form-item>
				 <el-form-item label="添加时间">
						<el-date-picker
						class="app-select-input"
						value-format="YYYY-MM-DD"
		format="YYYY-MM-DD"
        v-model="times"
				type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
			/>
				</el-form-item>
					<el-form-item in label="添加渠道">
					<el-select class="app-select-input" v-model="queryform.add_way" placeholder="请选择">
					<el-option v-for="(item,index) in addWaysList" :label="item.name" :value="item.id"  :key="index">
					</el-option>
				</el-select>
				</el-form-item>
					<el-form-item in label="性别">
					<el-select class="app-select-input" v-model="queryform.gender" placeholder="请选择">
					<el-option v-for="(item,index) in customerGender" :label="item.name" :value="item.id"  :key="index">
					</el-option>
				</el-select>
				</el-form-item>
					<el-form-item in label="流失状态">
					<el-select class="app-select-input" v-model="queryform.status" placeholder="请选择">
					<el-option v-for="(item,index) in customerLossingStatus" :label="item.name" :value="item.id"  :key="index">
					</el-option>
				</el-select>
				</el-form-item>
			
</el-form>
<div>

          <el-button type="primary" @click="getData">搜索</el-button>
					<el-button @click="clear">清除条件</el-button>
</div>
		</div>
		
		</div>
		<EditQr ref="editQr" @goBack="dialogVisible=false" />
	</div>
</template>
<style lang="scss">
	@import url('../../../../style/app-component.scss');
	@import '../../../../style/mixin.scss';
</style>